import {useParams} from "react-router-dom";

import Comment from "../Comment/Comment"
import React, {useEffect, useState} from "react";
import axios from "axios";

export default function ArticleContent() {
    const params = useParams()
    let content = []
    //过滤出符合ID的文章内容
    // content = jsonArticle.data.filter(person => person.titleID === `${params.id}`)
    // if (content.length === 0) {
    //     content = jsonArticleBodyHomePage.data.filter(person => person.titleID === `${params.id}`)
    // }
    // if (content.length === 0) {
    //     content = jsonArticleSuperClub.data.filter(person => person.titleID === `${params.id}`)
    // }
    // console.log(content.length === 0);
    const [data, setData] = useState(null);
    const [error, setError] = useState(null);
    useEffect(() => {
        axios.get(`http://localhost:8091/ArticleContent/${params.id}`)
            .then((response) => {
                console.log(response.data.data)
                content = response.data.data
                setData(response.data.data);
                setError(null);
            }).catch((error) => {
            setData(null);
            setError(error);
        });
    }, []); // 空的依赖数组意味着这个effect只会在组件挂载时运行
    if (error) {
        // 处理错误
        return <div>Error fetching data</div>;
    }
    if (!data) {
        // 数据还未加载，可以显示加载指示器
        return <div>Loading...</div>;
    }// 使用数据渲染组件
    return (
        <div className='ArticleContent'>
        <div>
            <h2>
                <p className="text-dark">
                    {data.title} <p className='text-black-50 fs-6'>内容编号:{data.id}</p>
                </p>
            </h2>
            <p className="text-dark text-lg-start ">  {/* react自带的富文本 */}
                <div dangerouslySetInnerHTML={{__html: ` ${data.content}`}}/>
            </p>
            <br/>
            {/* 评论组件（test） */}
            <Comment/>
        </div>
            )
    </div>)
}
